<mat-card>
  <h3> MatTable with Simple Columns </h3>

  <table mat-table [dataSource]="simpleTableDataSource"
             matSort #simpleTableSort="matSort">
    <!-- Basic column: name is used for header label AND data property -->
    <simple-column name="name" sortable></simple-column>
    <simple-column name="position"></simple-column>

    <!-- Name doesn't match the data property (or transform needed); define a custom data accessor -->
    <simple-column name="weight" [dataAccessor]="getWeight"></simple-column>

    <!-- Name doesn't match desired header text; define a custom label -->
    <simple-column name="symbol" label="SYMBOL!"></simple-column>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let data; columns: columnsToDisplay;"></tr>
  </table>
</mat-card>



<mat-card>
  <h3> Wrapper Table </h3>

  <wrapper-table [dataSource]="wrapperTableDataSource" [columns]="columnsToDisplay"
                 matSort #wrapperTableSort="matSort">
    <!-- Name (normal column) -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Position (simple column) -->
    <simple-column name="position"></simple-column>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsToDisplay; "></tr>
  </wrapper-table>
</mat-card>
